<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #count {
            display: none;
        }

        canvas {
            display: none;
        }

        :root {
            --tile-size: 0.7vmin;
            --distance: 1vmin;
        }

        @property --x {
            syntax: "<length>";
            initial-value: 0;
            inherits: true;
        }

        @property --y {
            syntax: "<length>";
            initial-value: 0;
            inherits: true;
        }

        @property --scale {
            syntax: "<number>";
            initial-value: 1;
            inherits: true;
        }

        #tiles {
            filter: drop-shadow(0 0 1rem #b818da);
            width: 0dvw;
            height: 0dvh;
            display: grid;
            place-items: center;
            cursor: pointer;
        }

        #tiles>div {
            border-radius: 50%;
            width: var(--tile-size);
            aspect-ratio: 1;
            background: hsla(var(--color), 110%, 60%, 1);
            position: absolute;
            transform: translate3d(var(--x), var(--y), 0) scale(var(--scale));
            --delay: calc(var(--p-r) * 1s);
            --color: calc(var(--p-r) * (360 - 100) + 100);
            --duration: calc(var(--p-r2) * 10s);
        }

        #tiles.show>div {
            animation: fade-in 0.3s linear forwards, show var(--duration) var(--delay) cubic-bezier(0.86, 0.86, 0.41, 1.16) infinite, blink 1s var(--delay) ease-in-out infinite;
        }

        @keyframes blink {

            from,
            50%,
            to {
                opacity: 1;
            }

            30%,
            70% {
                opacity: 0.3;
            }
        }

        @keyframes fade-in {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes show {
            from {
                --x: calc(1dvw * var(--p-r));
                --y: calc(-100dvh * var(--p-r));
                filter: blur(0.5rem);
                --scale: calc(clamp(1.5, 10 * var(--p-r2), 5));
            }

            5% {
                filter: blur(0rem);
            }

            10% {
                --x: calc(var(--p-x) * var(--distance));
                --y: calc(var(--p-y) * var(--distance));
                --scale: calc(1);
            }

            to {
                --x: calc(var(--p-x) * var(--distance));
                --y: calc(var(--p-y) * var(--distance));
            }
        }

        body {
            width: 100vw;
            height: 100vh;
            display: grid;
            place-items: center;
            background: conic-gradient(at 50% 52%, #180a3e, black, black, #180a3e);
            color: #ee75d2;
            margin: 0;
            overflow: clip;
            cursor: pointer;
        }

        * {
            box-sizing: border-box;
        }

        /* center at bottom */
        a.labs-follow-me {
            left: 2rem;
            right: 2rem;
            bottom: 1rem;
            top: unset;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="tiles" class="show"></div>
    <div id="count">1000</div>
    <canvas id="canvas"></canvas>

    <script>
        const counts = count.innerText;
        const size = 35;
        const ctx = canvas.getContext("2d");
        const font = `${size}px monospace`;
        ctx.font = font;
        const metrics = ctx.measureText(counts);
        canvas.width = metrics.width;
        canvas.height = size;

        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.font = font;
        ctx.fillStyle = "black";
        ctx.fillText(counts, 0, canvas.height);

        const { data } = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const length = data.length;
        const pixels = [];
        let x = 0,
            y = 0;
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;
        for (let i = 0; i < length; i += 4) {
            const pixel = { hit: data[i] === 0, i, x: x - centerX, y: y - centerY };
            if (data[i] === 0) {
                pixels.push(pixel);
            }
            x++;
            if (x === canvas.width) {
                x = 0;
                y++;
            }
        }
        pixels.forEach(({ x, y }, index) => {
            const tile = document.createElement("div");
            tile.style.setProperty("--p-x", `${x}`);
            tile.style.setProperty("--p-y", `${y}`);
            tile.style.setProperty("--p-i", `${index}`);
            tile.style.setProperty("--p-r", `${Math.random()}`);
            tile.style.setProperty("--p-r2", `${Math.random()}`);
            tiles.appendChild(tile);
        });

        document.addEventListener("click", () => {
            tiles.classList.remove("show");
            requestAnimationFrame(() => {
                tiles.classList.add("show");
            });
        });

    </script>
</body>

</html>